☝️☝️☝️☝️☝️ 影片連結

上一篇談到 API 時，畫面上已經出現過一包由大括號、中括號和許多欄位組成的資料，那就是 JSON。它看起來很像程式碼，但本身不會執行任何動作，只是一套把資料寫下來的格式。因為前端和後端都能讀懂它，所以網站經常用 JSON 傳遞商品、會員、訂單與操作結果。

這支影片會從大家比較熟悉的試算表開始，把每一列資料逐格對照到 JSON。看完後，你會知道：

• 鍵和值分別對應試算表中的哪個位置。
• 大括號表示一筆資料，中括號如何排出多筆資料。
• 文字、數字與 true、false 為什麼要使用正確的資料型別。
• JSON 為什麼不只屬於 JavaScript，其他程式語言也能讀取。
• Response 與 Preview 顯示的是同一份資料，閱讀方式卻不太一樣。
• 前端畫面需要的那一包資料，為什麼可能來自資料庫中的好幾張表。

影片裡也會換成圖書館的案例，讓你自己從書籍、作者、分類與館藏資料中挑出欄位，組成前端真正需要的結果。這個練習很重要，因為資料庫通常是一格一格、分表保存，API 回傳的 JSON 則是依照畫面需求重新整理。開發前先和 AI 談好欄位名稱、型別與巢狀結構，會比畫面都完成後才改資料格式省事很多。

當 API 狀態碼是 200，畫面仍然一片空白時，問題也可能藏在 JSON 裡：前端期待 price，後端卻傳回 productPrice；原本以為是數字，實際上收到的卻是文字。你可以打開這篇的互動式簡報，親手組合一包資料，再比較不同錯誤會如何影響畫面。看得懂資料長相後，交給 AI 的除錯線索也會具體很多。

文章同步發表於 https://book.casper.tw/it2026/json-and-data